<template>
	<view class="login">
		<view class="content-wrapper">
			<view class="title" style="background-image: url(http://localhost/swiper/1733296331191.png);background-size: cover;background-position: center;">
				<h1>湖文书舍</h1>
			</view>
			<view class="login-form">
				<view class="login-form-items">
					<view class="login-form-items-title">账号</view>
					<input type="text" class="login-input" placeholder="请输入账号或邮箱" v-model="account"/>
				</view>
 
				<view class="login-form-items">
					<view class="login-form-items-title">登录密码</view>
					<input :type="pwd_show?'text':'password'" class="login-input" placeholder="请输入登录密码" v-model="password"/>
					<!-- <image class="password_img" @click="change_pwd" style="width: 50px; height: 30px;" 
					:src="pwd_show? '/static/show_pswd.png':'/static/no_pswd.png'"></image> -->
				</view>
			</view>
		</view>
		<div class="submit-wrapper">
			<button style="background-color:#394752" type="primary" class="login-btn" @click="login">登录</button>
			<navigator style="margin-top: 30rpx;" url="/pages/register/register">前往注册</navigator>
		</div>
	</view>
</template>
 
<script setup>
	import {ref} from 'vue'
	import {baseUrl} from '../../static/js/util.js'
	import {loginRequest} from '../../static/js/api.js'
	import {onShow} from "@dcloudio/uni-app"
		let userInfo={}
        let pwd_show=ref(false)
		let account=''
		let password=''
		
		function change_pwd(){
			pwd_show.value=!pwd_show.value
		}
		function login(){
			let checkResult=checkParams()
			if(checkResult!=null){
				uni.showToast({
					icon:'error',
					title:checkResult
				})
				return 
			}
			let params={
				account,password
			}
			//发送登录请求
			let url=baseUrl+"/user/login"
			loginRequest(url,params)
		}
		
		function checkParams(){
			if(account==null||account==''){
				return "账号没填";
			}
			if(password==null||password==''){
				return "密码没填";
			}
			
		}
		
	onShow(()=>{
		localStorage.removeItem('user')
		localStorage.removeItem("Authorization")
	})
	
</script>
 
<style lang="scss" scoped>
	page {
		background: #F4F5F6;
	}
 
	.img_code {
		width: 60px;
		height: 30px;
	}
 
	.login {
		.content-wrapper {
			width: 100%;
 
			.title {
				margin-top: 35rpx;
				width: 100%;
				margin-bottom: 10px;
				height: 350rpx;
 
				h1 {
					border: 0px;
					width: 60%;
					margin: 0 auto;
					text-align: center;
					border-bottom: 1px solid #E3E3E3;
					height: 50px;
					line-height: 50px;
					font-size: 25px;
					overflow: hidden;
					font-weight: 400;
					color: #E3E3E3;
				}
			}
 
			.login-form {
				margin: 20px 10px 20px 15px;
				background: #FFFFFF;
 
				.login-form-items {
					padding: 15px 10px;
					border-bottom: 1px solid #F3F4F5;
					position: relative;
					display: -webkit-flex;
					display: flex;
 
					.login-form-items-title {
						width: 30%;
						line-height: 22px;
						height: 22px;
						flex-shrink: 0;
					}
 
					.login-input {
						width: 100%
					}
 
				}
			}
		}
 
		.submit-wrapper {
			padding: 10px;
			padding-top: 10px;
			background-color: 11ffff;
		}
 
	}
</style>